// ---------------  创建剪裁区
// - 调用cropper方法，创建剪裁区
$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});

$('.uplod-btn').click(function () {
  $('#file').click()
})

// 选择中图片input注册 change事件
$("#file").on("change", function () {

  // *********************************下面三步收集起来，防止未来使用
  // 1.获取图片对象；了解
  let obj = this.files[0];


  // 2.专门方法，把图片对象转化为临时URL地址: 了解
  let url = URL.createObjectURL(obj);


  // 3.替换到上面图片位置   查文档 了解
  // $(img) 被cropper插件修改；
  $('#image').cropper("replace", url);
});

// ******************************************************
// 图片文件：JS对象；
// JS对象转化字符串：base64位字符串；
// 前端页面：
//      img              地址
//      css:背景图片     地址
//      请求文件的资源：请求响应交互模型；
// base64字符串:
//      提前图片信息对象，转化为字符串，直接写在HTML img 或 CSS背景图；
//      好处：图片信息之间随着页面返回，不会发处其他请求，获取图片；
//      弊端：一个文件，总量大小比原来文件大小  大  30%；
//      应用：小图转化为base64；
let layer = layui.layer;

$(".sure").on("click", function () {
  // 1.图片被插件渲染完图片JQ对象：用插件方法：了解：收集
  let obj = $('#image').cropper('getCroppedCanvas', {
    width: 100,
    height: 100
  });
  // 把图片转成base64格式，得到超长字符串
  let base64 = obj.toDataURL('image/png');


  $.ajax({
    url: '/my/update/avatar',
    type: 'post',
    data: {
      avatar: base64
    },
    success: function (res) {
      layer.msg(res.message)
      if (res.status == 0) {
        window.parent.getinfo();
      }
    }
  });
});